@mixin px2rem($name, $px){
    #{$name}: $px / 75 * 1rem;
}

.flexbox{
    display: flex;
    display: -webkit-box;
}
body{
    background: #ffffff;
    font-family: "microsoft yahei";
}
.header{
    font-family: "microsoft yahei";
    @extend .flexbox;
    @include px2rem(height,90);
    @include px2rem(font-size,36);
    @include px2rem(line-height,90);
    color: white;
    justify-content: flex-end;
    background: linear-gradient(#f10000,#a60000); 
    .header_box{
        @extend .flexbox;
        justify-content: space-between;
        width: 55%;
        @include px2rem(padding-right,30);
        img{
            display: block;
            @include px2rem(width,100);
            @include px2rem(height,40);
            @include px2rem(margin-top,24);
        }
    }
}

.section{
    font-family: "microsoft yahei";
   p{
       color: #d2d2d2;
       @include px2rem(font-size,44);
       text-align: center;
       @include px2rem(margin-top,340);
   } 
}


.footer{
    font-family: "microsoft yahei";
    width: 100%;
    position: fixed;
    bottom: 0;
    background: #000000;
    color: white;
    @extend .flexbox;
    ul{
        @extend .flexbox;
        justify-content:space-around;
        align-items: center;
        flex:1;
        width: 100%;
        li{
           @include px2rem(width,150);
           @include px2rem(height,100);
           @include px2rem(padding-top,15);
           text-align: center;
            &:hover{
                background: rgba(255,255,255,0.5);
                @include px2rem(border-radius,10);
            }
            img{
                margin: 0 auto;
                @include px2rem(padding-bottom,12);
                @include px2rem(height,48);
                @include px2rem(width,48);
                display: block;
            .cont{
                text-align: center;
                @include px2rem(font-size,18);
            }
            }
        }
    }
}

